<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/5
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>悠U</title>

</head>
<body>

<div id="comm" style="margin: 20px auto; width: 1000px;">
    <h2></h2>
    <!-- 空白盒子 -->
    <div style="height: 20px;background-color: white; clear: both;"></div>
    <!-- 评论盒子 -->
    <div style="border: 1px solid #f0f0f0;
            background-color: #f8f8f8;width: 740px;">
        <div style="margin: 30px 30px">
            <c:forEach items="${comVoList}" var="comVoList">
                <div style="clear: both;margin-top: 15px;">
                    <!-- 评论 -->
                    <div style="margin-bottom: 10px;">
                        <div style="float: left;">
                            <img src="${comVoList.userTable.headImg}"
                                 style="border-radius: 50%;width: 50px;height: 50px;display: block"/>
                        </div>
                        <div style="float: left; margin: 0 0 0 15px;width: 300px">
                            <span style="color: #ff9224">${comVoList.userTable.username}&nbsp;</span>
                            <span style="color: #adadad">
                            <fmt:formatDate value="${comVoList.ctime}" pattern="yyyy-MM-dd" var="year"/>${year}&nbsp;
                            <fmt:formatDate value="${comVoList.ctime}" pattern="hh:mm:ss" var="year"/>${year}&nbsp;
                        </span>
                            <span style="color: #ff9224">+关注</span>
                            <br><br>
                            <span>${comVoList.content}</span>
                        </div>
                        <div style="float: right">
                            <br><br>
                            <span style="color: #adadad;font-size: 12px;cursor:pointer">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <%--判断是否登录 - 未登录跳转到登录界面--%>
                                <c:if test="${!empty userLogin}">
                                    <a onclick="btnone('m${comVoList.comId}')">评论</a>&nbsp;
                                </c:if>
                                    <c:if test="${empty userLogin}">
                                        <a href="${path}/userlogin/login">评论</a>&nbsp;
                                    </c:if>

                        </span>
                            <span style="color: #adadad;font-size: 12px">举报&nbsp;</span>
                        </div>
                    </div>

                        <%--二级评论隐藏框--%>
                    <div id="m${comVoList.comId}" style="display: none;">
                        <form role="form">
                            <input id="noteId" value="${comVoList.noteId}" style="display: none">
                            <input id="userId${comVoList.comId}" value="${comVoList.userId}"
                                   style="display: none">
                            <input id="floor${comVoList.comId}" value="${comVoList.floor}"
                                   style="display: none">
                            <div class="form-group">
                                            <textarea class="form-control" rows="3"
                                                      id="content${comVoList.comId}"></textarea>
                            </div>
                            <div style="float: right">
                                <button type="button" class="btn btn-primary"
                                        style="background-color: #ff9d00;width: 68px"
                                        onclick="saveTwo(${comVoList.comId})">提交
                                </button>
                            </div>
                        </form>
                    </div>

                    <div style="height: 10px;clear:both;"></div>
                    <!-- 回复 -->
                    <div style="border:0">
                        <div class="layui-collapse" style="border:0">
                            <div class="layui-colla-item" style="border:0;background-color: white;">
                                <c:if test="${!empty comVoList.twocomList}">
                                    <div class="layui-colla-title"
                                         style="border: 0;background-color: white;height: 30px;width: 90.5%; font-size: 11px;color: #ff9224; cursor: pointer;">
                                        <span style="margin-left:30px">查看回复</span>
                                    </div>
                                    <div class="layui-colla-content" style="padding: 0 0; border:0">
                                        <div style="background-image: url(${path}/imgs/forum-imgs/reply.png);background-size:100% 100%;margin:0 0 0 65px;clear: both;">
                                            <c:forEach items="${comVoList.twocomList}" var="p">
                                                <div style="margin: 0px 0 0 10px;">
                                                    <br>
                                                    <span style="color: #ff9224">${p.userTable.username}&nbsp;</span>
                                                    <span style="color: #adadad;font-size: 12px">回复&nbsp;</span>
                                                    <span style="color: #ff9224">${p.toUserTable.username}&nbsp;</span>
                                                    <span style="color:#adadad;font-size: 12px">
                                                <fmt:formatDate value="${p.ctime}" pattern="yyyy-MM-dd" var="year"/>${year}&nbsp;
                                                <fmt:formatDate value="${p.ctime}" pattern="hh:mm:ss" var="year"/>${year}
                                            </span>
                                                    <br><br>
                                                    <span>${p.content}</span>
                                                    <a href="${path}/noteinfo/jubao" target="_blank"><span
                                                            style="color: #adadad;font-size: 12px;float: right;">
                                                &nbsp;举报&nbsp;</span></a>
                                                    <span style="color: #adadad;font-size: 12px;float: right;cursor:pointer">
                                                         <%--判断是否登录 - 未登录跳转到登录界面--%>
                                                        <c:if test="${!empty userLogin}">
                                                            <a onclick="btntwo('m${p.comId}')"> 评论</a>&nbsp;
                                                        </c:if>
                                                            <c:if test="${empty userLogin}">评论</a>&nbsp;
                                                        <a href="${path}/userlogin/login">
                                                            </c:if>
                                                     </span>
                                                    <br><br>
                                                    <hr style="margin: 0 0">
                                                </div>

                                                <!-- 回复隐藏框 - 三级评论 -->
                                                <div id="m${p.comId}" style="display: none">
                                                    <form role="form">
                                                        <input id="noteIdThree" value="${comVoList.noteId}"
                                                               style="display: none">
                                                        <input id="floorThree${p.comId}" value="${p.floor}"
                                                               style="display: none">
                                                        <input id="userIdThree${p.comId}"
                                                               value="${p.userTable.id}"
                                                               style="display: none">

                                                        <div class="form-group">
                                                                        <textarea class="form-control" rows="3"
                                                                                  id="contentThree${p.comId}"></textarea>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-primary"
                                                                    style="background-color: #ff9d00;width: 68px"
                                                                    onclick="saveThree(${p.comId})">提交
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </c:forEach>
                                        </div>
                                    </div>
                                </c:if>
                            </div>
                        </div>
                    </div>

                </div>


            </c:forEach>
        </div>

        <!-- 评论框 -->
        <div class="comment" style="margin-top: 60px;">
            <form class="layui-form"
                  style="margin-left: -10%;">
                <%--action="${path}/send/sendComOne" method="post"--%>
                <input id="straId" value="${notes.id}" style="display: none">
                <%--${comVoList.noteId}--%>
                <div class="layui-form-item layui-form-text">
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" id="contentone" class="layui-textarea"></textarea>
                    </div>
                </div>
            </form>
            <div class="layui-form-item" style="padding-right: 20px">
                <div class="layui-input-block" style="width: 70px;height: 30px;float: right">
                    <c:if test="${!empty userLogin}">
                        <button type="submit" class="layui-btn" style="background-color: #ff9d00;width: 68px"
                                lay-submit=""
                                lay-filter="demo1" onclick="pubone()">发表
                        </button>
                    </c:if>
                    <c:if test="${empty userLogin}">
                        <a href="${path}/userlogin/login">
                            <button type="submit" class="layui-btn" style="background-color: #ff9d00;width: 68px"
                                    lay-submit=""
                                    lay-filter="demo1">发表
                            </button>
                        </a>&nbsp;

                    </c:if>

                </div>
            </div>

        </div>

    </div>
</div>

<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>
<%--<!-- 引入post - js -->--%>
<%--<script src="${path}/js/note/post.js"></script>--%>
<script type="text/javascript" src="${path}/plugins/layui/layui.all.js"></script>

<script>
    function btnone(obj) {
        var box = document.getElementById(obj);
        if (box.style.display == "none") {
            box.style.display = "block"
        } else {
            box.style.display = "none"
        }

    }
    function btntwo(obj) {
        var box = document.getElementById(obj);
        if (box.style.display == "none") {
            box.style.display = "block"
        } else {
            box.style.display = "none"
        }

    }
</script>

</body>
</html>